<template>
  <div>
      <div>
          <span @click="change(1)" :class="{active:tab==1}">首页</span>
          <span @click="change(2)" :class="{active:tab==2}">活动</span>
          <span @click="change(3)" :class="{active:tab==3}">新闻</span>
          <span @click="change(4)" :class="{active:tab==4}">消息</span>
      </div>
      <div class="box" v-show="tab==1">首页的内容</div>
      <div class="box" v-show="tab==2">最新活动</div>
      <div class="box" v-show="tab==3">新闻列表</div>
      <div class="box" v-show="tab==4">消息通知</div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            tab:1
        }
    },
    methods:{
        change(tab){
            this.tab=tab
        }
    }
}
</script>

<style>
.box{
    width:80%;
    height: 200px;
    background-color: lightblue;
}
.active{
    color: lightskyblue;
}

</style>